import {Canvas, Meta, Story} from '@storybook/blocks'

import * as ButtonStories from './Button.stories'

<Meta of={ButtonStories} />

# Button

Buttons are used for **actions**, like in forms, while textual hyperlinks are used for **destinations**, or moving from one page to another.

Note: When using a `<button>` element, **always specify a `type`**.

## Button types

### Default

Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.

<Canvas of={ButtonStories.Default} />

### Primary

Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.

<Canvas of={ButtonStories.Primary} />

### Outline

Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.

<Canvas of={ButtonStories.Outline} />

### Danger

Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.

<Canvas of={ButtonStories.Danger} />

### Link

Create a button that looks like a link with `.btn-link`. Rather than using an `<a>` to trigger JS, this style on a `<button>` should be used for better accessibility.

**The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**

<Canvas of={ButtonStories.Link} />

### Invisible

When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.

<Canvas of={ButtonStories.Invisible} />

## Button states

### Selected

Adding an `aria-selected="true"` attribute will keep the button in a selected state.

<Canvas of={ButtonStories.Selected} />

### Disabled

Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.

<Canvas of={ButtonStories.Disabled} />

## Button variations

### Sizes

Next to the default size there is also a `.btn-sm` (small) and `.btn-large` option. Use them to decrease or increase the button size. This is useful for fitting a button next to an input or turning a button into a prominent call to action in hero sections.

Type scale utilities can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.

<Canvas of={ButtonStories.Sizes} />

### Block button

Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.

<Canvas of={ButtonStories.Block} />

### Hidden text button

Use `.hidden-text-expander` to indicate and toggle hidden text.

<Canvas of={ButtonStories.HiddenText} />

You can also make the expander appear inline by adding `.inline`.

## Button with icons

Icons can be added to any button.

<Canvas of={ButtonStories.WithIcons} />

### Icon-only button

Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.

<Canvas of={ButtonStories.IconOnly} />

### Close button

When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.

<Canvas of={ButtonStories.CloseButton} />

## Button with counts

You can easily append a count to a **small button**. Add the `.btn-with-count` class to the `.btn-sm` and then add the `.social-count` after the button.

**Be sure to clear the float added by the additional class.**

<Canvas of={ButtonStories.ButtonWithCounts} />

## Button groups

Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.

<Canvas of={ButtonStories.ButtonGroup} />

Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.

<Canvas of={ButtonStories.ButtonGroupSmall} />

Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.

<Canvas of={ButtonStories.ButtonGroupParent} />
